<template>
	<view class="v-demo">
		<view class="v-demo-wrap">
			<view class="v-demo-title">演示效果</view>
			<view class="v-demo-area">
				<city-select
					v-model="value"
					@city-change="cityChange"
				></city-select>
				<view class="v-demo-result-line">{{
					input ? input : "Picker值"
				}}</view>
			</view>
		</view>
		<view class="v-config-wrap">
			<view class="v-config-title v-border-bottom">参数配置</view>
			<view class="v-config-item">
				<view class="v-item-title">状态</view>
				<v-button @click="value = true">打开Picker</v-button>
			</view>
		</view>
	</view>
</template>

<script>
import citySelect from "./v-city-select.vue";
export default {
	components: {
		citySelect,
	},
	data() {
		return {
			height: 30,
			bgColor: this.$u.color.bgColor,
			marginTop: 30,
			marginBottom: 30,
			value: false,
			input: "",
		};
	},
	methods: {
		cityChange(e) {
			this.input =
				e.province.label + "-" + e.city.label + "-" + e.area.label;
		},
	},
};
</script>

<style scoped>
.btn-wrap {
	margin: 100rpx 30rpx;
}
</style>
